<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="李愧愧">
    <title>浏览器浏览历史记录</title>
    <style>
        .header-inner {
            width: 1170px;
            height: 100px;
            margin: 0 auto;
        }

        .header-inner .logo {
            width: 160px;
            height: 100px;
            background-image: url(./hearder/logo.png);
            background-size: 100%;
            float: left;
        }

        .header-inner .header-left {
            width: 304px;
            height: 100px;
            float: left;
        }

        .header-inner .header-left img {
            width: 100%;
            height: 100%;
        }

        .header-inner .header-right {
            width: 453px;
            height: 60px;
            margin-top: 33px;
            float: right;

        }

        .header-inner .header-right .right-top {
            height: 453px;
            height: 36px;
            box-sizing: border-box;
            border: 2px solid #fa2a83;
            position: relative;
            background-color: #fa2a83;
        }

        .header-inner .header-right .right-top input {
            width: 397px;
            height: 32px;
            padding: 2px 12px;
            box-sizing: border-box;
            border: none;
            outline: none;
        }

        .header-inner .header-right .right-top i {
            display: inline-block;
            width: 25px;
            height: 25px;
            background-image: url(./hearder/tpjl.png);
            background-position: -282px -103px;
            position: absolute;
            top: 5px;
            right: 14px;
            background-color: #fa2a83;
        }

        .header-inner .header-right .right-top i button {
            width: 53px;
            height: 36px;
            background-color: rgba(0, 0, 0, 0);
            position: absolute;
            top: -7px;
            left: -12px;
            border: none;
            outline: none;
        }

        .header-inner .header-right .right-bottom ul {
            list-style: none;
            font-size: 12px;
            color: #999999;
            padding: 0px;
            margin: 2px;
        }

        .header-inner .header-right .right-bottom ul li {
            float: left;
            margin-right: 6px;
        }

        .header-inner .header-right .right-bottom ul li a {
            color: #999999;
            margin-right: 6px;
            text-decoration: none;
        }

        .header-inner .header-right .right-bottom ul li span {
            margin-right: 6px;
        }

        .header-inner .header-tool {
            width: 96px;
            height: 34px;
            box-sizing: border-box;
            border: 1px solid #ccc;
            background-color: #f6f7f9;
            float: right;
            margin-top: 33px;
            margin-left: 36px;
            line-height: 32px;
            font-size: 11px;
            color: #333333;
            padding-left: 25px;
            padding-right: 33px;
            position: relative;
        }

        .header-inner .header-tool .i1 {
            display: inline-block;
            width: 12px;
            height: 17px;
            background-image: url(./hearder/tpjl.png);
            background-position: 0px -208px;
            /* background-color: rosybrown; */
            position: absolute;
            top: 7px;
            left: 7px;
        }

        .header-inner .header-tool .i2 {
            width: 24px;
            height: 16px;
            position: absolute;
            top: 9px;
            right: 4px;
            border-radius: 10px;
            background-color: #f00581;
            font-style: normal;
        }

        #search {
            width: 452px;
            height: 318px;
            background-color: #fff;
            position: absolute;
            top: 34px;
            left: -2px;
            padding-top: 11px;
            /* display: none; */
            border: 1px solid #ccc;
        }

        #search p {
            margin: 0;
            padding-top: 5px;
            padding-left: 15px;
            font-size: 12px;
            color: #999;
        }

        #search ul {
            padding: 0px;
            width: 169px;
            margin: 0;
            color: #333333;
            font-size: 12px;
        }

        #search ul li {
            box-sizing: border-box;
            padding: 15px;
            height: 28px;
            
            list-style: none;
        }
        #search-left{
            width: 169px;
            height: 316px;
            border-right: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="header-inner">
        <div class="logo">

        </div>
        <div class="header-left">
            <img src="./hearder/1587017895494.jpg" alt="">
        </div>

        <div class="header-tool">
            <i class="i1"></i>
            <span>购物带</span>
            <i class="i2"></i>
        </div>
        <div class="header-right">
            <div class="right-top">
                <input type="text" name="" id="">
                <i>
                    <button onclick="search()"></button>
                </i>
                <div id="search">
                    <div id="search-left">
                        <p>搜索历史</p>
                        <ul>

                        </ul>
                    </div>

                </div>
            </div>
            <div class="right-bottom">
                <ul>
                    <li><a href="">护肤套装</a><span>|</span></li>
                    <li><a href="">连衣裙</a><span>|</span></li>
                    <li><a href="">女休闲鞋</a><span>|</span></li>
                    <li><a href="">耐克Nike</a><span>|</span></li>
                    <li><a href="">女式休闲裤</a><span>|</span></li>
                    <li><a href="">女单鞋</a></li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        var input = document.querySelector(".header-inner .header-right .right-top input");
        console.log(input)
        var button = document.querySelector(".header-inner .header-right .right-top i button")
        console.log(button)
        var searchHistory = document.querySelector("#search")
        var historyDiv = document.querySelector("#search-left ul");
        var lis = document.getElementsByTagName("#search-left ul li");
        var keywordArray;
        // 定义数组用于记录搜索历史的关键字
        // 从本地读取搜索历史
        var historyString = localStorage.getItem("history");
        // 判断是否有历史记录
        if (historyString) {
            // 有
            // 字符串转数组
            keywordArray = historyString.split("*")
        } else {
            // 没有
            // 初始化数组
            keywordArray = [];
        }
        console.log(keywordArray)
        // 页面打开或刷新时读取本地历史记录
        // keywordArray 
        // 当输入框获取焦点时,读取本地历史记录展示
        input.onfocus = function () {
            searchHistory.style.display = "block"
            // 先清空
            historyDiv.innerHTML = ""
            keywordArray.forEach(function (item) {
                var li = document.createElement("li")
                li.innerText = item;
                historyDiv.appendChild(li);
            })
        }
        // 当输入框失去焦点时,隐藏本地历史记录
        input.onblur = function () {
            // historyDiv.innerHTML = ""
            searchHistory.style.display = "none"
        }
        // 点击搜索按钮，把搜索关键字存储本地
        function search() {
            // 判断用户输入的关键字是否包含分割符*
            if (input.value.includes("*") || input.value.trim().length == 0) {
                alert("搜索信息不合法");
                return;
            }
            // 判断数组中是否存在这个搜索关键字
            var index = keywordArray.indexOf(input.value)
            if (index >= 0) {
                keywordArray.splice(index, 1)
            }
            // 把搜索关键字存入数组中
            keywordArray.unshift(input.value);
            // 限制数组长度不能大于10，只保留最近10条
            if (keywordArray.length > 10) {
                keywordArray.pop() //删除最后一条数据
                // keywordArray.slice(0,9)//截取前十条
            }
            // 清空输入框
            input.value = ""
            // 搜索历史更新之后把关键字数组存入本地
            localStorage.setItem("history", keywordArray.join("*"));
        }
    </script>
</body>

</html>